<template>
  <div>
    <x-header title="公告列表"></x-header>
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore" :auto-fill="true">
      <panel :list="msglist" type="2" @on-click-item="clickItem"></panel>
      <div v-if="msglist.length == 0">暂无公告信息</div>
    </mt-loadmore>
  </div>
</template>

<script>
import { XHeader, Panel } from 'vux'
import { Loadmore as MtLoadmore, Toast } from 'mint-ui'
import { GetPageList } from '@/api/notice'

export default {
  components: {
    XHeader,
    Panel,
    MtLoadmore
  },
  data() {
    return {
      q: {
        startPage: 1,
        pageCount: 10
      },
      msglist: []
    }
  },
  created() {},
  methods: {
    loadMore(q, cb) {
      GetPageList(q).then(result => {
        var lst = result.data.items.map(x => {
          return {
            id: x.id,
            title: x.title,
            desc: x.content,
            isTop: x.isTop
          }
        })
        cb(lst)
      })
    },
    loadTop() {
      var _this = this
      _this.q.startPage = 1
      _this.loadMore(_this.q, lst => {
        if (lst.length > 0) {
          _this.msglist = lst
        } else {
          Toast('没有更多数据')
        }
      })
    },
    loadBottom() {
      var _this = this
      _this.loadMore(_this.q, lst => {
        if (lst.length > 0) {
          _this.msglist = _this.msglist.concat(lst)
          _this.q.startPage++
        } else {
          Toast('没有更多数据')
        }
      })
    },
    clickItem(item) {
      // this.$router.push({name: '/noticesdetail', params: {id: item.id}})
      this.$router.push({ name: '/noticesdetail', query: { id: item.id } })
    }
  }
}
</script>
